<template>
	<div>
		<!-- 主页 -->
		<!-- 1.0推荐歌单 -->
		<h3 class="title">推荐歌单</h3>
		<!-- Layout栅格布局 -->
		<van-row gutter="5">
			<van-col span="8" v-for="item in songList" :key="item.id">
				<van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" />
				<p class="song_name">{{item.name}}</p>
			</van-col>
		</van-row>

		<!-- 2.0最新音乐 -->
		<h3 class="title">最新音乐</h3>
		<van-cell-group>
			<van-cell center v-for="item in newSong" :key="item.id" :title="item.name"
				:label="item.song.artists[0].name + ' - ' + item.name" label-class="newSlabel">

				<!-- 使用 right-icon 插槽来自定义右侧图标 -->
				<template #right-icon>
					<van-icon name="play-circle-o" size="0.7rem"/>
				</template>

			</van-cell>
		</van-cell-group>

	</div>
</template>

<script>
	import {
		recommendMusicAPI,
		newSongAPI
	} from '../../api/index.js'
	export default {
		data() {
			return {
				songList: [],
				newSong: []
			}
		},


		created() {
			//调用后返回promise对象
			recommendMusicAPI({
					limit: 6
				})
				.then((res) => {
					this.songList = res.data.result;
					console.log(this.songList)
				});

			newSongAPI()
				.then((res) => {
					this.newSong = res.data.result;
					console.log(this.newSong);
				})
		}
	}
</script>

<style>
	/* 标题 */
	.title {
		padding: 0.266667rem 0.24rem;
		margin: 0 0 0.24rem 0;
		background-color: #eee;
		color: #333;
		font-size: 15px;
	}

	/* 推荐歌单 - 歌名 */
	.song_name {
		font-size: 0.346667rem;
		padding: 0 0.08rem;
		margin-bottom: 0.266667rem;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
	}

	.newSlabel {
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
	}
	
	
/* 	.van-icon{
		display: flex;
		justify-content: center;
		flex-direction: column;
	} */
	

</style>
